<template>
	<view>
		<u-navbar style="margin-top: 10px;" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" :fixed="true">
			<view slot="left">
				<u-icon name="arrow-left" size="28"></u-icon>
			</view>
			<view slot="center">
				<text>{{ queryData.planName }}</text>
			</view>
		</u-navbar>
		<view style="display: flex;align-items: flex-end; background: #fff; padding: 40rpx;">
			<image style="width: 96rpx; height: 96rpx" src="../../static/images/topImg.svg" />
			<!-- <uni-data-select v-model="tabsId" :localdata="range" @change="changeSelect" 
				style="width: 200rpx;"></uni-data-select> -->
			<view style="display: flex;justify-content: space-around;">
				<view v-for="(item, index) in range" :key="item.value"
					:class="item.value == tabsId ? 'active' : 'noActive'" @click="changeSelect(item)">{{ item.text }}
				</view>
			</view>
		</view>
		<view style="background: #fff;margin-top: 20rpx;" v-if="tabsId == 2">
			<!-- <u-tabs :list="list1" @click="click"></u-tabs> -->
			<view class="flex" style="margin-bottom: 40rpx;padding:40rpx 0 0 40rpx">
				<view v-for="item in list1" :key="item.name" class="tabIconStyle" @click="click(item)">
					{{ item.name }}
					<image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/activeBot.svg"
						v-if="item.practiceType == practiceType" class="activeIcon" />
				</view>
			</view>
			<u-collapse @change="change" @close="close" @open="open" style="margin-top: 20rpx;"
				:value="practiceDtat.map((nowItem, onwIndex) => onwIndex.toString())">
				<u-collapse-item v-for="(item, index) in practiceDtat" :key="item.practiceUuid"
					:title="item.subjectName" :name="index" style="margin: 0;">
					<view class="u-collapse-content">
						<view style="display: flex;justify-content: space-around;text-align: center;">
							<view style="position: relative;">
								<image class="circularImg" src="../../static/images/quantity.svg" />
								<view class="fraction">{{ (item.practiceNum || 0) + '/' + item.itemNums }}</view>
								<view>累计练习题量</view>
							</view>
							<view style="position: relative;">
								<image class="circularImg" src="../../static/images/accuracy.svg" />
								<view class="fraction">{{ item.correctRate ? (item.correctRate * 1) + '%' : '0%' }}
								</view>
								<view>准确率</view>
							</view>
						</view>
						<view
							style="background: linear-gradient(180deg, #FBFFFB 0%, #F6FFF7 100%);border-radius: 12px;display: flex;align-items: center;padding:20rpx 40rpx;margin-top: 20rpx;">
							<text>上次练习时间：{{ item.lastModifyDataDate || '暂无' }}</text>
						</view>
						<view v-if="practiceType != 1" style="display: flex;justify-content: center;margin-top: 40rpx;">
							<button type="default" hover-class="hoverClass"
								style="color:#37B874; width:200rpx; line-height: 72rpx;background-color: #fff;font-size: 16px;border: 1px solid #37B874;border-radius: 20px"
								@click="() => {
									onClearUpPractiseHistory(item)
								}">清除练习</button>
						</view>
						<view v-if="item.children && practiceType == 2"
							style="margin: 40rpx 0;height: 35%;overflow: auto;">
							<view style="font-size: 18px; margin-bottom: 20rpx;">目录</view>
							<view v-for="(childTiem, childIndex) in item.children" :key="childTiem.id">
								<u-collapse>
									<u-collapse-item
										:title="`${childTiem.structName}(${childTiem.children ? childTiem.children.length : 0})`"
										:name="childIndex">
										<a v-for="(questions, questionsIndex) in childTiem.children" :key="questions.id"
											@click="() => onJump(item, questions)" style="margin-bottom: 20rpx;">
											{{ questions.name }} ({{ questions.practiceNum || 0 }}/{{ questions.itemNums
												|| 0 }})
										</a>
									</u-collapse-item>
								</u-collapse>
							</view>


						</view>
						<view v-if="item.children && practiceType == 3" style="margin: 40rpx 0;">
							<view @click="() => onStartExam(childTiem)" v-for="(childTiem, childIndex) in item.children"
								:key="childTiem.id"
								style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 50rpx;padding-left: 40rpx;">
								<view style="color: #333333; font-size: 16px;">
									{{ onChangeDict(childTiem.type,
										mapDictCodesData.allQuestionType) }} （{{ childTiem.itemNums }}）
								</view>
								<view style="display: flex;">
									<text style="color: #666666; font-size: 14px;">查看</text>
									<u-icon name="arrow-right" size="16"></u-icon>
								</view>

							</view>

						</view>
						<view v-else-if="practiceType == 1"
							style="display: flex;justify-content: space-around;margin-top: 40rpx;">
							<button type="default" hover-class="hoverClass"
								style="color:#37B874; width:200rpx; line-height: 72rpx;background-color: #fff;font-size: 16px;border: 1px solid #37B874;border-radius: 20px"
								@click="() => {
									onClearUpPractiseHistory(item)
								}">清除练习</button>
							<button type="default" hover-class="hoverClass"
								style="color:#fff; width: 200rpx; line-height: 72rpx;" class="gradient-button" @click="() => {
									onStartExam(item)
								}">开始练习</button>
						</view>


					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view v-else-if="tabsId == 3" style="background: #fff;margin-top: 20rpx;">
			<u-collapse>
				<u-collapse accordion @change="change" @close="close" @open="open" :value="0">
					<u-collapse-item v-for="(item, index) in practiceDtat" :key="item.subjectUuid" :title="item.name"
						:name="index">
						<view class="u-collapse-content">
							<view style="display: flex;justify-content: space-around;text-align: center;">
								<view style="position: relative;">
									<image class="circularImg" src="../../static/images/quantity.svg" />
									<view class="fraction">{{ practiceDetail.testCount || 0 }}次</view>
									<view>自测次数</view>
								</view>
								<view style="position: relative;">
									<image class="circularImg" src="../../static/images/accuracy.svg" />
									<view class="fraction">{{ practiceDetail.maxScore || 0 }}分</view>
									<view>最高分数</view>
								</view>
							</view>
							<view
								style="background: linear-gradient(180deg, #FBFFFB 0%, #F6FFF7 100%);border-radius: 12px;display: flex;align-items: center;padding:20rpx 40rpx;margin-top: 20rpx;">
								<text>上次练习时间：{{ practiceDetail.lastTestDate || '暂无' }}</text>
							</view>
							<view style="display: flex;justify-content: space-around;margin-top: 40rpx;">
								<button type="default" hover-class="hoverClass"
									style="color:#37B874; width:200rpx; line-height: 72rpx;background-color: #fff;font-size: 16px;border: 1px solid #37B874;border-radius: 20px"
									@click="() => {
										onRecord(item)
									}">自测记录</button>
								<button type="default" hover-class="hoverClass"
									style="color:#fff; width: 200rpx; line-height: 72rpx;" class="gradient-button"
									@click="() => {
										onSelfTesting(item)
									}">开始自测</button>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>

			</u-collapse>
		</view>
		<view v-else-if="tabsId == 1" style="margin-top: 20rpx;">
			<view style="background: #fff;">

				<u-collapse @change="change" @close="close" @open="open" style="margin-top: 20rpx;"
					:value="collapseValue" ref="collapse">
					<u-collapse-item v-for="(item, index) in studyCountData" :key="item.uuid" :title="item.name"
						style="margin: 0;" :name="index">
						<view class="u-collapse-content">
							<view style="display: flex;justify-content: space-around;text-align: center;">
								<view style="position: relative;">
									<image class="circularImg" src="../../static/images/quantity.svg" />
									<view class="fraction">{{ item.resourceDone || 0 }}/{{
										item.resourceTotal || 0 }}</view>
									<view>累计视频进度</view>
								</view>
								<view style="position: relative;">
									<image class="circularImg" src="../../static/images/quantity.svg" />
									<view class="fraction">{{ item.myPractice || 0 }}/{{
										item.itemTotal || 0 }}</view>
									<view>累计练习题量</view>
								</view>
								<view style="position: relative;">
									<image class="circularImg" src="../../static/images/accuracy.svg" />
									<view class="fraction">{{ item.correctNum || 0 }}%
									</view>
									<view>准确率</view>
								</view>
							</view>
							<view
								style="background: linear-gradient(180deg, #FBFFFB 0%, #F6FFF7 100%);border-radius: 12px;display: flex;align-items: center;padding:20rpx 40rpx;">
								<text>上次练习时间：{{ item.lastModifyDataDate || '暂无' }}</text>
							</view>
						</view>
						<view style="background: #fff;margin-top: 20rpx;padding: 20rpx;">
							<!-- <u-input placeholder="请输入关键字" prefixIcon="search"
								prefixIconStyle="font-size: 32px;color: #909399; padding:0 14rpx"
								customStyle="border-radius: 24rpx; height: 60rpx; margin-top: 20rpx"></u-input> -->
							<view>
								<view @click="() => onClickGoPlay(studentDetailItem, index)"
									v-for="(studentDetailItem, sindex) in item.resources" :key="sindex">
									<view
										style="height: 180rpx; width: 100%; display: flex; flex-direction: row; padding: 40rpx 0;position: relative;">

										<image
											style="border-radius: 6rpx; width: 180rpx; height: 180rpx; margin-right: 30rpx;"
											:src="studentDetailItem.imageUrl"></image>
										<view
											style="display: flex; flex-direction: column; justify-content: space-between;">
											<view style="font-weight: bold;">
												{{ studentDetailItem.name }}
											</view>
											<view style="display: flex; flex-direction: row; align-items: center;">
												<image style="width: 60rpx; height: 50rpx; margin-right: 20rpx"
													src="../../static/images/teacher.svg" mode="scaleToFill" />
												<view style="font-size: 28rpx">讲师：{{ studentDetailItem.teacher }}</view>
												<view
													style="width: 10rpx; height: 10rpx; background: #8E8E8E; border-radius: 5rpx; margin: 0 20rpx;">
												</view>
												<view style="color: rgba(153, 153, 153, 1); font-size: 24rpx;">
													{{ ((studentDetailItem.learningTime || 0) / 60).toFixed(1) }}分钟
												</view>
											</view>
											<view
												style="display: flex; flex-direction: row; align-items: center; color: rgba(153, 153, 153, 1); font-size: 24rpx;">
												<view style="margin-right: 20rpx;">总时长：{{ ((studentDetailItem.time || 0)
													/ 60).toFixed(1) }}分钟
												</view>
												<view
													:style="{ marginRight: '20rpx', color: parseInt(studentDetailItem.learningTime / studentDetailItem.time * 100) != 100 ? '#FF7D00' : '#27BA76' }">
													进度：{{ studentDetailItem.learningTime ?
														parseInt(studentDetailItem.learningTime / studentDetailItem.time *
															100) : 0 }}%
												</view>
											</view>
										</view>
										<view style="position: absolute;top: 50%;right: 0;">
											<u-icon name="arrow-right"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>


		</view>
	</view>
</template>

<script>
import { getBzPracticeTab, listPractice, startPractice, getPracticeSelfTestList, getBhCheck, clearUpPractiseHistory, addPracticeNum, queryStudyResourceList, getPracticeStudyCount } from '../../services/PracticeTestingService';
import {
	mapDictCodes
} from '../../services/ServerService.js'
import { getArrObjectByProperty, notificationFun } from '../../utils/PrjUtils.js'
export default {
	data() {
		return {
			mapDictCodesData: {},
			practiceDtat: [],
			queryData: {},
			tabs: [], // 下拉tab
			tabsId: '', // 下拉id
			list1: [],
			practiceType: 1,
			range: [],
			practiceDetail: {}, // 测评详情
			coursewareData: [], // 学习课件
			studyCountData: [

			], //学习数据详情
			collapseValue: ['0'], // 默认打开第一个折叠项
			openData: [], // 打开的tab
			sIndex:0,
		}
	},
	watch: {
		practiceType: {
			handler(newVal, oldVal) {
				this.onListPractice()
			},
		},
		tabsId: {
			handler(newVal, oldVal) {

				if (newVal == 2) {
					this.onListPractice()
				} else if (newVal == 3) {
					this.onGetPracticeSelfTestList()
				} else if (newVal == 1) {
					this.onqueryStudyResourceList()
				}
			}
		}
	},

	onLoad(option) {
		console.log(option, "---169")
		console.log(JSON.parse(decodeURIComponent(option.planItem)), 'option')
		this.queryData = JSON.parse(decodeURIComponent(option.planItem))
		if (this.queryData.modelType === 1) {
			this.list1 = [
				{
					name: '题海练习',
					practiceType: 1,

				},
				{
					name: '题型练习',
					practiceType: 3,
				},
			]
		} else {
			this.list1 = [
				{
					name: '题海练习',
					practiceType: 1,

				}, {
					name: '章节练习',
					practiceType: 2,
				},
				{
					name: '题型练习',
					practiceType: 3,
				},
			]
		}
		//   查询顶部tab
		this.onGetBzPracticeTab()
		this.onMapDictCodes()
	},
	onShow() {
		if (this.tabsId == 2) {
			this.onListPractice()
		} else if (this.tabsId == 3) {

			this.onGetPracticeSelfTestList()
		} else if (this.tabsId == 1) {
			// 返回到页面时，重置为只打开第一个折叠项
			this.tabsId = 0
			// 在下一帧重新显示组件
			this.$nextTick(() => {
				this.tabsId = 1;
				this.collapseValue = [this.sIndex.toString()]; // 重置为只打开第一个折叠项
			});
			this.onqueryStudyResourceList()

		}
	},
	methods: {

		//页面A -- 接收参数
		reBackData(val) {
			console.log(val,'参数参数');// 参数
			this.sIndex = val
		},
		onMapDictCodes() {
			mapDictCodes('allQuestionType').then(res => {
				this.mapDictCodesData = res
			})
		},
		// 查询顶部tab
		onGetBzPracticeTab() {
			getBzPracticeTab({ id: this.queryData.id }).then(res => {
				let bottomTabArr = []
				const range = [
					{ value: 2, text: "题库练习" },
					{ value: 3, text: "模拟自测" },
					{ value: 1, text: "学习资源" },
				]
				range.map(item => {
					if (res.includes(item.value)) bottomTabArr.push(item);
				})
				this.range = bottomTabArr
				this.tabsId = this.range[0].value
			})
		},
		// 查询练习 
		onListPractice() {
			this.practiceDtat = []
			listPractice({ id: this.queryData.id, practiceType: this.practiceType }).then(res => {
				this.practiceDtat = res
			})
		},
		// 清除练习
		onClearUpPractiseHistory(item) {
			clearUpPractiseHistory({ practiceUuid: item.practiceUuid, type: this.practiceType }).then(res => {
				notificationFun('清除成功')
				this.onListPractice()
			})
		},
		click(item) {
			console.log('item', item);
			this.practiceType = item.practiceType
		},
		onChangeDict(val, dict) {
			if (dict) {
				console.log(getArrObjectByProperty(dict, 'value', val)?.label, 'val, dict', val, dict)
				return getArrObjectByProperty(dict, 'value', val)?.label || ''
			}
		},
		onTabs(item) {
			console.log(item, 'item')

		},
		open(e) {
			console.log('open', e)
			if (this.tabsId == 3) {
				this.onGetBhCheck(this.practiceDtat[e].outLineTestId)
			} else if (this.tabsId == 1) {
				this.onGetPracticeStudyCount(this.studyCountData[e].uuid)
			}
		},
		close(e) {
			console.log('close', e)
		},
		change(e) {
			let arr = []
			e.forEach(item => {
				if (item.status == 'open') {
					arr.push(item)
				}
			})
			this.openData = arr
			console.log('change', e, this.openData)
		},
		changeSelect(e) {
			console.log('change', e)

			this.tabsId = e.value
		},
		// 开始练习 
		onStartExam(item) {
			console.log(item, 'item')
			startPractice({ practiceUuid: item.practiceUuid || '', id: this.queryData.id, modelType: item.modelType, practiceType: this.practiceType, planOutlineUuid: item.planOutlineUuid, outlineSubjectUuid: item.outlineSubjectUuid, structUuid: '', itemType: item.type || '' }).then(res => {
				uni.navigateTo({
					url: '/pages/practiceTesting/exercisesPage?practiceUuid=' + res
				})
			})



			// if (item.practiceUuid) {
			// 	addPracticeNum({ practiceUuid: item.practiceUuid }).then(res => {
			// 		uni.navigateTo({
			// 			url: '/pages/practiceTesting/exercisesPage?practiceUuid=' + item.practiceUuid
			// 		})
			// 	})
			// } else {
			// 	startPractice({ id: this.queryData.id, modelType: item.modelType, practiceType: this.practiceType, planOutlineUuid: item.planOutlineUuid, outlineSubjectUuid: item.outlineSubjectUuid, structUuid: '', itemType: item.type }).then(res => {
			// 		uni.navigateTo({
			// 			url: '/pages/practiceTesting/exercisesPage?practiceUuid=' + res
			// 		})
			// 	})
			// }

		},
		// 章节跳转 
		onJump(item, childTiem) {
			console.log(childTiem, 'childTiem')
			startPractice({ practiceUuid: childTiem.practiceUuid || '', id: this.queryData.id, modelType: childTiem.modelType, practiceType: this.practiceType, planOutlineUuid: childTiem.planOutlineUuid, outlineSubjectUuid: childTiem.outlineSubjectUuid, structUuid: childTiem.structUuid, itemType: '' }).then(res => {
				uni.navigateTo({
					url: '/pages/practiceTesting/exercisesPage?practiceUuid=' + res + '&structUuid=' +
						'&planId=' + '&publishType='
				})
			})
			// if (childTiem.practiceUuid) {
			// 	uni.navigateTo({
			// 		url: '/pages/practiceTesting/exercisesPage?practiceUuid=' + item.practiceUuid
			// 	})
			// } else {
			//
			// }

		},
		// 模拟自测列表
		onGetPracticeSelfTestList() {
			getPracticeSelfTestList({ id: this.queryData.id }).then(res => {
				this.practiceDtat = res
				this.onGetBhCheck(this.practiceDtat[0].outLineTestId)
			})
		},

		onGetPracticeStudyCount(uuid) {
			// 获取在线学习统计
			getPracticeStudyCount({ id: this.queryData.id, uuid: uuid }).then(res => {
				const index = this.studyCountData.findIndex(item => item.uuid === uuid);
				if (index !== -1) {
					this.studyCountData[index] = { ...this.studyCountData[index], ...res };
					this.$forceUpdate(); // 强制更新视图
				}
				console.log(this.studyCountData, 'this.studyCountData.');
			});


		},
		// 查询学习课件
		onqueryStudyResourceList() {
			queryStudyResourceList({
				id: this.queryData.id
			}).then(res => {
				this.studyCountData = res
				this.onGetPracticeStudyCount(res[this.sIndex].uuid)
			})
		},

		// 查询模拟评测详情信息
		onGetBhCheck(outLineTestId,) {
			console.log(outLineTestId, 'outLineTestId')
			getBhCheck({ outLineTestId: outLineTestId, id: this.queryData.id }).then(res => {
				this.practiceDetail = res

			})
		},
		// 开始自测
		onSelfTesting(item) {
			uni.navigateTo({
				url: '/pages/practiceTesting/selfTestingPage?outLineTestId=' + item.outLineTestId +
					'&id=' + this.queryData.id
			})
		},
		// 自测记录 
		onRecord(item) {
			uni.navigateTo({
				url: '/pages/practiceTesting/recordPage?outLineTestId=' + item.outLineTestId +
					'&id=' + this.queryData.id
			})
		},
		// 学习资源跳转 
		onClickGoPlay(item, sIndex) {
			item.id = this.queryData.id
			item.uuid = this.studyCountData[sIndex].uuid
			console.log(66666, item, sIndex)
			uni.navigateTo({
				url: `/pages/practiceTesting/studyPlayPage?queryData=${JSON.stringify(item)}&sIndex=${sIndex}`
			})
		},
	}

}
</script>

<style lang="scss">
.u-tabs__wrapper__nav__line.data-v-0de61367 {
	background-color: black !important;
}

.u-line.data-v-e778bab2 {
	display: none;
}

.data-v-3bf52cdf {
	background-color: white !important;
	border-radius: 40rpx;
}

.u-collapse-item {
	margin-bottom: 40rpx;
	max-height: 900px;
}

.u-cell__body.data-v-913eaa32 {
	padding: 30rpx !important;
}

.circularImg {
	width: 200rpx;
	height: 200rpx;
	position: relative;
}

.fraction {
	position: absolute;
	top: 34%;
	width: 100%;
	color: #fff;
}

.practice {
	background: linear-gradient(180deg, #2B5182 0%, #258FF0 100%);
}

.questionTextItem {
	padding: 26rpx 50rpx;
	font-weight: 400;
	font-size: 30rpx;
	line-height: 42rpx;
	color: #232A50;
	background: #FFF;
	border-radius: 10rpx;
	margin-bottom: 26rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	transition: all .3s;
}

.bottomButton {
	flex: 1;
	display: flex;
	text-align: center;
	padding: 10rpx 0;
	color: #3F87FF;
	font-size: 30rpx;
	line-height: 42rpx;
	justify-content: center;
	align-items: center;
}

.gradient-button {
	border-radius: 20px;
	background: linear-gradient(90deg, #37B874 0%, #B7F5D4 100%);
	color: #fff;
	font-size: 16px;
}

.hoverClass {
	opacity: 0.5;
}

.u-collapse-item {
	margin: 0 !important;
}

.tabIconStyle {
	color: #666;
	font-size: 32rpx;
	position: relative;
	margin-right: 46rpx;

	.active {
		font-size: 36rpx;
		font-weight: 500;
	}

	.activeIcon {
		width: 72rpx;
		height: 50rpx;
		position: absolute;
		top: 22rpx;
		left: 32rpx;
	}
}

.active {
	background-color: #37B874;
	border-radius: 24rpx;
	padding: 10rpx;
	color: #FFF;
	margin-left: 30rpx;
}

.noActive {
	border-radius: 24rpx;
	padding: 10rpx;
	background-color: #F8F8F8;
	margin-left: 30rpx;
}
</style>